<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common/common_head :: commonHead('用户管理')"></head>
</head>
<body class="auth-user">
<div class="layui-fluid">
    <div class="layui-row larryms-panel auth-user-add">
        <form class="layui-form"  id="userForm">
            <div class="layui-form-item">
                <label for="userAccount" class="layui-form-label">
                    <span class="x-red">*</span>账户
                </label>
                <div class="layui-input-inline">
                    <input type="hidden" name="userId" id="userId" th:value="${id}"/>
                    <input type="text"  id="userAccount" name="userAccount"  lay-verify="userAccount"
                           autocomplete="off" class="layui-input larry-input" />
                </div>
                <div id="ms" class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span><span id="ums">将会成为您唯一的登入名</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="userName" class="layui-form-label">
                    <span class="x-red">*</span>姓名
                </label>
                <div class="layui-input-block">
                    <input type="text" id="userName" name="userName" lay-verify="userName"  autocomplete="off"
                           class="layui-input larry-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="userMobile" class="layui-form-label">
                    <span class="x-red">*</span>手机
                </label>
                <div class="layui-input-block">
                    <input type="text" id="userMobile" name="userMobile"  lay-verify="phone"
                           autocomplete="off" class="layui-input larry-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="female" class="layui-form-label">
                    <span class="x-red">*</span>性别
                </label>
                <div class="layui-input-block">
                        <input type="radio" name="userSex" value="01" title="男" />
                        <input type="radio" id="female" name="userSex" value="02" title="女" checked="true" />
                </div>
            </div>
            <div class="layui-form-item">
                <label for="status" class="layui-form-label">
                    <span class="x-red">*</span>状态
                </label>
                <div class="layui-input-block">
                    <input type="checkbox" name="status" id="status" lay-skin="switch"
                           lay-text="正常|停用" lay-filter="statusDemo" checked="true"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>角色选择</label>
                <div class="layui-input-block" id="roles">

                </div>
            </div>
        <div th:if="${param.detail == null}">
            <div class="larryms-layer-btn">
                 <a class="layui-btn layui-btn layui-btn-sm left" lay-submit=""
                    lay-filter="add" id="submit" th:attr="data-url=@{/system/user/saveUser}">保存</a>
                <a class="layui-btn layui-btn layui-btn-sm  layui-btn-danger" id="resetBtn">重置</a>
                <a class="layui-btn layui-btn layui-btn-sm  layui-btn-primary" id="close">关闭</a>
            </div>
        </div>
    </form>
    </div>
</div>
<script type="text/javascript" th:src="@{/static/larryms/layui/layui.js}"/>
<script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
var flag ,msg, bathPath = /*[[@{/}]]*/ "/";
layui.config({
    version: ui.version,
    layertype:2,
    identified:'userForm',
    base: bathPath + 'static/larryms/',  //实际使用时，建议改成绝对路径
    rightMenu: "none" // false关闭，设置为custom时使用自定义，不使用默认menu
}).extend({
    larry:'js/base'
}).use(['larry','table','custom'], function(){
    var $ = layui.$, form = layui.form ,beone = layui.custom;
    $("ul.larryms-fixbar").hide();
    $(function(){
        $('#userAccount').on("blur",function(){
            var userAccount=$('#userAccount').val();
            userAccount = userAccount.trim();
            if(userAccount.match(/[\u4e00-\u9fa5]/)){
                return;
            }
            if(!/(.+){3,12}$/.test(userAccount)){
                return;
            }
            if(userAccount != '') {
                var url =  /*[[@{/system/user/checkUser}]]*/ "/system/user/checkUser";
                url += "?userAccount=" + userAccount;
                var userId = $("#userId").val();
                if(userId){
                    url += "&userId=" + userId;
                }

                $.ajax({
                    url: url, async: false, type: 'get', success: function (data) {
                        flag = data.flag;
                        $('#ms').find('span').remove();
                        if (!data.flag) {
                            msg = data.msg;
                            $('#ms').append("<span style='color: red;'>"+data.msg+"</span>");
                        }else{
                            flag=true;
                            $('#ms').append("<span style='color: green;'>用户名可用</span>");
                        }
                    },beforeSend:function(){
                        $('#ms').find('span').remove();
                        $('#ms').append("<span>验证ing</span>");
                    }
                });
            }
        });

        var id = [[${id}]] , roleIds = [];
        if(id){
            flag = true;
            var entityUrl =  /*[[@{/system/user/}]]*/ "/system/user/";
            entityUrl += id + "/object";
            $.ajax({url: entityUrl, async: false, type: 'post', dataType:"json",
                success: function (data) {
                    $("#userAccount").val(data.userAccount).attr("readonly", true);
                    $("#userName").val(data.userName);
                    $("#userMobile").val(data.userMobile);
                    if("09" == data.userStatus){
                        $("#status").removeAttr("checked");
                    }
                    $("input[name='userSex']").each(function(){
                        if( $(this).val() == data.userSex ){
                            $(this).attr("checked", true);
                        }else {
                            $(this).removeAttr("checked");
                        }
                    })
                    roleIds = data.roleIds.split(",");
                }
            });
        }

        var rolesUrl =  /*[[@{/system/role/allRoles}]]*/ "/system/role/allRoles";
        $.ajax({url: rolesUrl, async: false, type: 'post', dataType:"json",
            success: function (data) {
                var html = "";
                for(var i = 0; i < data.length; i++){
                    var item = data[i];
                    var flag =  false;
                    for(var j in roleIds){
                        if(item.roleId == roleIds[j]){
                            flag = true;
                            break;
                        }
                    }
                    html += "<input type=\"checkbox\" name=\"role\" title=\"" + item.roleName
                            + "\" lay-filter=\"check\" value='" + item.roleId + "' "
                            +  (flag ? " checked='true'" : "") + "/>";
                }
                $("#roles").html(html);
            }
        });
        form.render();
    });

    //自定义验证规则
    form.verify({
        userAccount: function(value){
            if(value.trim()==""){
                return "账户不能为空";
            }
            if(value.match(/[\u4e00-\u9fa5]/)){
                return "账户不能有中文";
            }
            if(!/(.+){3,12}$/.test(value)){
                return "账户必须3到12位";
            }
            if(typeof(flag)=='undefined'){
                return "账户验证ing";
            }
            if(!flag){
                return msg;
            }
        }
        , userName: function(value) {
            if (value.trim() == "") {
                return "姓名不能为空";
            }
        }
    });

    var indexFre = parent.layer.getFrameIndex(window.name);
    $('#close').click(function(){
        parent.layer.close(indexFre);
    });
    $('#resetBtn').on('click', function() {
        $('#userForm')[0].reset();
    });
    //监听提交
    form.on('submit(add)', function(data){
        var r=document.getElementsByName("role");
        var role=[];
        for(var i=0;i<r.length;i++){
            if(r[i].checked){
                role.push(r[i].value);
            }
        }

        if(role.length == 0){
            beone.toastMsg({content: "请至少选择一个角色!",icon:'fail', anim:'fail'});
            return false;
        }

        if(data.field.status == 'on'){
            data.field.userStatus = '01';
        }else {
            data.field.userStatus = '09';
        }
        data.field.roleIds=role.join(",");
        var url = $(this).data("url");
        $.post(url, data.field, function(res) {
            if (res.code == "success") {
                larryms.msg(res.desc);
                parent.table.reload('userList', {});
                parent.layer.close(indexFre);
            }
        });
        return false;
    });
});
/*]]>*/</script>
</body>
</html>